<template>
    <el-row class="warp" 
        flex="cross:center" 
        style="display:flex; align-items:center; "
    >
        <el-col :span="4" style="height:100%">
            <div class="thumb-warp" @mouseenter="hover=true" @mouseleave="hover=false">
                <el-image class="img"  :src="lesson.courseThumb"></el-image>
            <div class="thumb-hover" v-show="hover" 
                flex="main:center cross:center" 
                style="display:flex; justify-content: center; align-items:center; "
            >
                <el-button round type="warning" color="#ffcfba" @click="checkLesson">展开课程</el-button>
            </div>
            </div>
        </el-col>
        <el-col class="content" :span="15" :offset="1">
            <p class="title">
                {{lesson.courseName}} <span class="type">{{type}}</span>
            </p>
            <el-progress class="progress" :percentage="progress" status="exception" :show-text="false"></el-progress>
            <p class="total">
                共 <span>{{lesson.lessonCount}}</span> 个课时，已完成 <span>{{lesson.lessonLearnedCount}}</span> 个课时
            </p>
            </el-col>
        <el-col  :span="3" :offset="1" class="progress_text">学习进度 {{progress}} %</el-col>
    </el-row>
</template>

<script lang="ts">

    export default {
        props:{
            lesson:Object
        },
        
        data(){
            return {
                hover:false,
                
            }
        },
        computed:{
            progress(){
                if(this.lesson.lessonCount>0){
                    
                return parseInt(this.lesson.lessonLearnedCount/this.lesson.lessonCount*100)
                }
                return 0
            
              
        },
        type(){
            switch(this.lesson.courseMode){
                case 1: return '录播';
                case 2: return '直播';
                default: return ''
            }
        },
        
    },
    methods:{
        checkLesson(){
            this.$emit('checkLesson',this.lesson)
        }
    }
    }
</script>

<style lang="scss" scoped>
.progress_text{
    font-size:14px;
    color: #808080;
}
.title{
    font-size:14px;
}
.content{
    height:86px;
}
.warp{
    width: 100%;
    height:86px;
    .img{
        height:100%;
        width: 150px;
        border-radius: 6px;
        flex-shrink: 0;
    }
    .progress{
        margin:14px auto
    }
    .type{
        border: 1px solid var(--el-color-primary); //$--color-primary;
        color: var(--el-color-primary); //$--color-primary;
        font-size:12px;
        width:46px;
        height:16px;
        line-height: 16px;
        text-align:center;
        display:inline-block;
        border-radius:8px;
        margin-left: 20px;
    }
    .total{
        font-size:14px;
        span {
            color: var(--el-color-primary); //$--color-primary;
        }
    }
    .thumb-warp,.thumb-hover{
        width: 100%;
        height:100%;
        position: relative;
    }
    .thumb-hover{
        position:absolute;
        left:0;
        top:0;
        background:rgba(0,0,0,0.1);
        button{
            color: var(--el-color-primary); //$--color-primary; $--color-primary;
        }
    }
}
</style>